<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地球热力图</title>
    <!-- 引入 Leaflet 样式 -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <style>
        #map {
            width: 100%;
            height: 600px;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <!-- 引入 Leaflet 库 -->
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <!-- 引入 leaflet.heat 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.heat/0.2.0/leaflet-heat.min.js"></script>
    <script>
        // 初始化地图
        const map = L.map('map').setView([0, 0], 2);

        // 添加底图图层
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // 从后端获取数据，修改为指定接口地址
        fetch('http://localhost:8080/heightData')
            .then(response => response.json())
            .then(data => {
                // 处理数据，转换为 heatmap.js 需要的格式
                const heatmapData = data.heightData.map(item => {
                    return [item.lat, item.lon, item.value];
                });

                // 配置 heatmap.js 选项
                const heatmapLayer = L.heatLayer(heatmapData, {
                    radius: 25,
                    blur: 15,
                    maxZoom: 18,
                    max: 10000, // 根据实际数据调整最大值
                    gradient: {
                        0.2: 'blue',
                        0.4: 'cyan',
                        0.6: 'lime',
                        0.8: 'yellow',
                        1: 'red'
                    }
                }).addTo(map);
            })
            .catch(error => {
                console.error('获取数据失败:', error);
            });
    </script>
</body>
</html>